<template>
	<view>
		<view class="logo-container d-flex a-center j-center">
			<image src="../../../static/images/logo1.png" style="height: 112upx;width: 390upx;" mode=""></image>
		</view>
		<view class="register-form">
			<view class="sun-form-item border-bottom">
				<text class="sun-label">手机号</text>
				<input v-model="infoData.mobile" type="text">
			</view>
			<view class="sun-form-item border-bottom">
				<text class="sun-label">验证码</text>
				<input v-model="infoData.captcha" type="text">
				<text v-if="!isShowCountDown" class="sun-veri-code" @tap="getCaptcha">获取验证码</text>
				<text class="sun-veri-code" v-else>{{countDown}}秒后可重新发送</text>
			</view>
			<view class="sun-btn" @tap="skipToResetPage">
				<text class="font-30">重置密码</text>
			</view>
			<view class="d-flex a-center j-center font-24" style="height: 60upx;margin-top: 38upx;">
				<text style="color: #CCCCCC;" @tap="toLoginPage">返回登录页面</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				infoData:{
					mobile: "",
					captcha: ""
				},
				phoneAuth: /^1[3456789]\d{9}$/,
				isShowCountDown: false,
				countDown: 60
			}
		},
		methods: {
			toLoginPage(){
				uni.redirectTo({
					url: '/pages/mine/login/login'
				});
			},
			skipToResetPage(){
				let mobile = this.infoData.mobile.trim();
				let captcha = this.infoData.captcha.trim();
				//缺少正则验证
				if(!mobile || !captcha){
					uni.showToast({
						title: '手机号或验证码未填写！',
						icon: 'none'
					});
					return
				}
				if (!this.phoneAuth.test(mobile)) {
					uni.showToast({
						title: '请检查手机号格式是否正确',
						icon: 'none'
					})
					return
				}
				uni.redirectTo({
					url: '/pages/mine/resetPass/resetPass?captcha=' + this.infoData.captcha + '&mobile=' + this.infoData.mobile
				});
			},
			getCaptcha(){
				let mobile = this.infoData.mobile.trim();
				if(!mobile){
					uni.showToast({
						title: '请确保手机号已填写！',
						icon: 'none'
					});
					return
				}
				if(!this.phoneAuth.test(mobile)){
					uni.showToast({
						title: '请检查手机号格式是否正确！',
						icon: 'none'
					})
					return
				}
				const _this = this;
				api.request({
						url: '/captcha',
						data: {
							mobile: _this.infoData.mobile,
							type: 3
						}
					})
					.then(response => {
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						})
						_this.isShowCountDown = true;
						_this.countDown = 60;
						let timer = setInterval(() => {
							if (_this.countDown > 0) {
								_this.countDown--;
							} else {
								clearInterval(timer)
								_this.isShowCountDown = false;
								_this.countDown = 60;
							}
						}, 1000)
					})
					.catch(err => {
						uni.showToast({
							title: '验证码发送失败',
							icon: 'none'
						})
					});
			}
		}
	}
</script>

<style scoped>
.logo-container{
	width: 100%;
	height: 375rpx;
}
.register-form{
	width: 570upx;
	padding: 30upx 90upx;
}
.sun-form-item{
	display: flex;
	margin-bottom: 20upx;
	height: 80upx;
	align-items: center;
}
.sun-form-item .sun-label{
	width: 120upx;
}
.sun-form-item input{
	flex: 1;
	font-size: 28upx;
}
.sun-btn{
	margin-top: 80upx;
	background-color: #005BAC;
	height: 90upx;
	color: white;
	text-align: center;
	line-height: 90upx;
}
.sun-veri-code{
	color:#005BAC;
	font-size: 28upx;
}
</style>

